﻿@model Tasker.WebUI.Models.Task.TaskEditModel

@{
    ViewBag.Title = "Редактировать задачу";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<script type="text/javascript">
    
    var activeEmployee,
        curId = 0;

    function currentId() {
        var res = curId;
        curId++;
        return res;
    }

    function valOrDefault(dict, param, _default) {
        if (dict != null && typeof dict != 'undefined' && param in dict)
            return dict[param];
        return _default;
    }

    function Employee(emObject, id) {
        this.id = id;
        this.userId = valOrDefault(emObject, 'userId', '');
        this.userName = valOrDefault(emObject, 'userName', '');
        this.userPosition = valOrDefault(emObject, 'userPosition', '');
        this.renderToHtml = function() {
            var url = '@Url.Content("~/Content/images/community/arrow.png")';
            var html = '<div class="employee-row"> \
                           <input type="hidden" name="task_workers" value="' + this.userId  + '"/> \
                           <span>' + this.userName + '</span> \
                           <span>' + this.userPosition + '</span> \
                           <a href="javascript:;" class="btn btn-danger" onclick="activeEmployee.deleteEmployee(' + this.id + ');">X</a> \
                        </div>';
            return html;
        };
        this.equal = function(obj) {
            return this.userId == obj.userId;
        };
    }

    function ActiveEmployee(emObject) {
        self = this;
        this.employee = {};
        @foreach (var tw in Model.TaskWorkers)
        {
            <text>
                id = currentId();
                this.employee[id] = new Employee({
                    'userId': '@tw.Id',
                    'userName': '@tw.FullName',
                    'userPosition': '@tw.Position'
                }, id);
            
            </text>
        }
        
        curId = this.employee.length;
        if(typeof curId == 'undefined') curId = 0;
        function isExisted(employee) {
            var res = false;
            for(var i in self.employee) {
                if(employee.equal(self.employee[i])) {
                    res = true;
                    break;
                }
            }
            return res;
        };
        
        this.renderToHtml = function () {
            var html = '';
            for (var i in this.employee) {
                html += '<li id="em-container-' + this.employee[i].id + '">' + this.employee[i].renderToHtml() + '</li>';
            }
            return html;
        };

        this.addEmployee = function(obj) {
            var em = new Employee(obj, currentId());
            if(isExisted(em)) {
                alert("This employee is existed!");
            } else {
                this.employee[em.id] = em;
                $('#employee-list').append('<li id="em-container-' + em.id + '">' + em.renderToHtml() + '</li>');    
            }
                
        };

        this.deleteEmployee = function(id) {
            if(id in this.employee) {
                $('#employee-list li#em-container-' + id).remove();
                delete this.employee[id];
            }
        };

        this.init = function() {
            $('#employee-list').html(activeEmployee.renderToHtml());
        };
    }

    activeEmployee = new ActiveEmployee();
    

    function addEmployee() {
        var srcLangObj = '#worker-selector option:selected';
        activeEmployee.addEmployee({
            'userId': $(srcLangObj).val(),
            'userName': $(srcLangObj).attr('uname'),
            'userPosition': $(srcLangObj).attr('position')
        });
    }

    $(document).ready(function () {

        $('.task-form-common dl input, \
           .task-form-common dl textarea').focusin(function () {
            $(this)
                .parents('dl')
                .addClass('ui-state-highlight');
        });

        $('.task-form-common dl input, \
           .task-form-common dl textarea').focusout(function () {
            $(this)
                .parents('dl')
                .removeClass('ui-state-highlight');
        });

        $('#start-date').datepicker({ dateFormat: "dd-mm-yy" });
        $('#finish-date').datepicker({ dateFormat: "dd-mm-yy" });
        
        activeEmployee.init();
    });

</script>


<h2>Редактирование задачи</h2>

@using(Html.BeginForm("Edit", "Task", FormMethod.Post))
{
    <fieldset class="task-form-common">
        <dl>
            <dt>
                <label>
                    Задача
                </label>
            </dt>
        
            <dd>
                <div class="wdt">
                    @Html.TextBoxFor(m => m.Name, new { @class = "input-text-width-full input-text-font-large" })
                    @Html.ValidationMessageFor(m => m.Name)
                </div>
            </dd>
        </dl>
        <dl>
            <dt>
                <label>
                    Суть задачи
                </label>
            </dt>
        
            <dd>
                <div class="wdt">
                    @Html.TextAreaFor(m => m.Description, new { @class = "input-text-width-full input-text-font-large desc" })
                    @Html.ValidationMessageFor(m => m.Description)
                </div>
            </dd>
        </dl>
        
        <dl>
            <dt>
                <label>
                    Надзадача
                </label>
            </dt>
        
            <dd>
                <div class="wdt">
                    <select>
                        <option>
                            
                        </option>
                        @foreach (var task in Model.Tasks)
                        {
                            <option value="@task.Item1">
                                @task.Item2
                            </option>
                        }
                    </select>
                </div>
            </dd>
        </dl>
        
        <dl>
            <dt>
                <label>
                    Дата старта
                </label>
            </dt>
        
            <dd>
                <div class="wdt">
                    @Html.TextBoxFor(m => m.StartDate, new { id = "start-date", @class = "input-text-font-large desc", value = "" })
                </div>
            </dd>
        </dl>
        
        <dl>
            <dt>
                <label>
                    Дата окончания
                </label>
            </dt>
        
            <dd>
                <div class="wdt">
                    @Html.TextBoxFor(m => m.FinishDate, new { id = "finish-date", @class = "input-text-font-large desc" })
                    @Html.ValidationMessageFor(m => m.FinishDate)
                </div>
            </dd>
        </dl>
        
        <dl>
            <dt>
                <label>
                    Исполнитель
                </label>
            </dt>
        
            <dd>
                <div class="wdt">
                    <select id="worker-selector" style="font-size: 1.5em;">
                        @foreach(var user in Model.Users)
                        {
                            <option value="@user.Id" uname="@user.FullName" position="@user.Position">
                                @user.FullName,
                                <span style="color: gray;">@user.Position</span>
                            </option>
                        }
                    </select>
                    <a href="javascript:;" onclick="addEmployee();" class="btn" style="vertical-align: top;">
                        +
                    </a>
                    <ul id="employee-list">
                    </ul>
                </div>
            </dd>
        </dl>
    </fieldset>
    <a href="javascript:;" onclick="$(this).parents('form').submit();" class="btn btn-primary">
        Сохранить
    </a>
}

